<template>
	<div class="yh_content foSi14">
		<div class="btn-group_top">
			<el-button type="primary" class="bac6b7" @click.stop="back" size="small">返回</el-button>
		</div>
		<div v-if="cardDetail" class="mar" style="width: 840px;">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
				<div class="item-l wid100 dis hei42">
					<div class="dis item-p1 disAl disJuB wid33 item-bor">
						<div>姓名</div>
						<div>{{cardDetail.member_name}}</div>
					</div>
					<div class="dis item-p1 disAl disJuB wid33 item-bor">
						<div>性别</div>
						<div>{{cardDetail.member_sex === 1?'男':'女'}}</div>
					</div>
					<div class="dis item-p1 disAl disJuB wid33">
						<div>手机</div>
						<div>{{cardDetail.member_tel}}</div>
					</div>
				</div>
				<div class="hei20 mar-top10 foSi12" style="color: #787878;">编辑会员卡</div>
				<div class="item-l wid100 dis disAl mar-bott10">
					<div class="item-w item-bor item-p1 dis disAl disJuB hei42">
						<div>卡名称</div>
						<div>{{cardDetail.card_name}}</div>
					</div>
					<div class="item-w item-p1 dis disAl disJuB hei42">
						<div><span style="color:#ff0000;margin-right:2px">*</span>卡号</div>
						<el-form-item class="mp0" prop="card_number">
							<el-input v-model="ruleForm.card_number" style="width: 140px;" size="small"
								placeholder="会员卡号" />
						</el-form-item>
					</div>
				</div>
				<div class="item-l wid100 dis disAl mar-bott10">
					<div class="item-w item-bor item-p1 dis disAl disJuB hei42">
						<div>发卡时间</div>
						<div>{{cardDetail.cards_hairpin}}</div>
					</div>
					<div v-if="cardDetail.card_state !== 4" class="item-w item-p1 dis disAl disJuB hei42">
						<div><span style="color:#ff0000;margin-right:2px">*</span>开卡时间</div>
						<el-form-item class="mp0" prop="cards_activate">
							<el-date-picker v-model="ruleForm.cards_activate" style="width: 140px;" size="small"
								type="date" placeholder="请选择开卡时间" />
						</el-form-item>
					</div>
				</div>
				<div v-if="cardDetail.card_state !== 4" class="item-l wid100 dis disAl  mar-bott10">
					<div class="item-w item-p1 dis disAl disJuB item-bor hei42">
						<div><span style="color:#ff0000;margin-right:2px">*</span>有效期至</div>
						<el-form-item class="mp0" prop="cards_period">
							<el-date-picker v-model="ruleForm.cards_period" style="width: 140px;" size="small"
								type="date" placeholder="请选择有效期至" />
						</el-form-item>
					</div>
					<div class="item-w item-p1 dis disAl disJuB hei42">
						<div><span style="color:#ff0000;margin-right:2px">*</span>余额（{{cardDetail.card_type === 2?'次':cardDetail.card_type === 3?'元':'天'}}）</div>
<!--						<el-form-item v-if="cardDetail.card_type === 2" class="mp0" prop="charge_card_balance">-->

            <el-form-item class="mp0" prop="charge_card_balance">
							<el-input v-model="ruleForm.charge_card_balance" style="width: 140px;" size="small"
								placeholder="请输入余额" />
						</el-form-item>
<!--						<div v-else >{{ cardDetail.current_balance }}</div>-->
					</div>
				</div>
				<div class="item-l wid100 dis disAl mar-bott10">
					<div class="item-w item-p1 dis disAl disJuB hei42 item-bor">
						<div>售卡金额（元）</div>
						<div>{{cardDetail.charge_card_receipts_money}}</div>
					</div>
					<div class="item-w item-p1 dis disAl disJuB hei42"></div>
				</div>
				<div class="item-l item-p2 wid100 mar-bott10" style="flex-direction: column;">
					<div class="dis disAl">
						<div class="mar-right20" style="width: 140px;letter-spacing: 2px;">推荐办卡人</div>
						<el-autocomplete v-model="ruleForm.staff_id" :fetch-suggestions="remoteMethod1"
							placeholder="姓名/手机号" @select="staffChange" style="width: 200px;"></el-autocomplete>
					</div>
					<div v-if="Object.keys(staff).length > 0" class="dis disAl mar-top10"
						style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;">
						<el-popover placement="top-start" title="推荐办卡人" width="400" trigger="click"
							content="可以是员工或者是会员。如果是一个陌生人，直接输入姓名即可。编辑会员卡时可再次编辑。">
							<i slot="reference" class="el-icon-question wenhao mar-right5" />
						</el-popover>
						<div>姓名：{{staff.name}}</div>
						<div class="mar-left20">性别：{{staff.sex === 1?'男':'女'}}</div>
						<div class="mar-left20">手机：{{staff.mobile}}</div>
					</div>
					<div v-else class="dis disAl mar-top10"
						style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;">
						<el-popover placement="top-start" title="推荐办卡人" width="400" trigger="click"
							content="可以是员工或者是会员。如果是一个陌生人，直接输入姓名即可。编辑会员卡时可再次编辑。">
							<i slot="reference" class="el-icon-question wenhao mar-right5" />
						</el-popover>
						<div class="dis disAl">
							<div>推荐人</div>
							<div class="mar-left10"><el-tag type="warning">陌生人</el-tag></div>
						</div>
						<div v-if="ruleForm.staff_id" class="mar-left10">{{ruleForm.staff_id}}</div>
					</div>
				</div>
				<div class="wid100 item-l item-p2 dis disAl disJuB">
					<div>备注</div>
					<div><el-input v-model="ruleForm.notes" type="textarea" style="min-width:720px;" maxlength="1000"
							:rows="5" placeholder="请输入备注" /> </div>
				</div>
				<div class="buttom_btns">
					<div class="save">
						<el-button type="primary" class="bac6b7" @click.stop="submitForm('ruleForm')">保存</el-button>
					</div>
					<div class="nosave">
						<el-button type="info" @click="back">取消</el-button>
					</div>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo,
		cardSearch1,
		getCardDetails,
		cardEdit
	} from '@/api/member'
	export default {
		name: 'editMemberCard',
		components: {
			Pagination
		},
		data() {
			const cardBalance = (rule, value, callback) => {
				var len = 0
				if (value) {
					var tem = value.toString().split('.')
					len = tem.length >= 2 ? tem[1].length : 0;
				}
				if (Number(value) === 0) {
					callback()
				} else if (!parseFloat(value) || value % 1 !== 0 || value < 0 || len > 1) {
					callback(new Error('请输入余额（支持一位小数）'))
				} else {
					callback()
				}
			}
			return {
				id: null,
				staff: {},
				cardDetail: {},
				ruleForm: {
					card_number: null,
					cards_activate: null,
					cards_period: null,
					charge_card_balance: null,
					staff_id: null,
					notes: null
				},
				rules: {
					card_number: [{
						required: true,
						message: '请输入1~16位卡号',
						trigger: 'blur'
					}],
					cards_activate: [{
						required: true,
						message: '请选择开卡时间',
						trigger: 'change'
					}],
					cards_period: [{
						required: true,
						message: '请选择开卡时间',
						trigger: 'change'
					}],
					charge_card_balance: [{
						required: true,
						trigger: 'blur',
						validator: cardBalance
					}],
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			var xuanList = [{
				name: '编辑会员卡',
				url: '/member/editMemberCard?id=' + query.id,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getMeberId()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.cardDetail)
						var date = {
							card_number: this.ruleForm.card_number,
							cards_activate: this.ruleForm.cards_activate,
							cards_period: this.ruleForm.cards_period,
							staff_id: this.staff?this.staff.id:0,
							staff_name: this.ruleForm.staff_id,
							charge_card_balance: this.ruleForm.charge_card_balance,
							notes: this.ruleForm.notes,
							card_id: this.id
						}
						cardEdit(date).then(response => {
							this.back()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			staffChange(e) {
				console.log(e)
				this.ruleForm.staff_id = e.item.name
				this.staff = e.item
			},
			remoteMethod1(queryString, cb) {
				console.log(queryString)
				this.staff = {}
				cardSearch1({
					keyword: queryString
				}).then(response => {
					const {
						data
					} = response
					this.staff_options = data.map((terminal) => {
						return {
							value: terminal.name + ' / ' + (terminal.sex === 1?'男':'女') + ' / ' + terminal.mobile,
							item: terminal,
						};
					});
					cb(this.staff_options);
				})
			},
			back() {
				this.$router.go(-1)
			},
			getMeberId() {
				// 创建一个 Date 对象
				var today = new Date();
				// 获取年、月、日、时、分、秒
				var year = today.getFullYear();
				var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
				var day = today.getDate();
				var hours = today.getHours();
				var minutes = today.getMinutes();
				var seconds = today.getSeconds();
				this.ruleForm.card_number = year + (month < 10 ? "0" : "") + month + (day < 10 ? "0" : "") + day +
					(hours < 10 ? "0" : "") + hours + (minutes < 10 ? "0" : "") + minutes
				this.ruleForm.cards_activate = year + '-' + (month < 10 ? "0" : "") + month + '-' + (day < 10 ? "0" : "") +
					day
				this.getList()
			},
			getList() {
				getCardDetails({
					'card_id': this.id
				}).then(response => {
					const {
						data
					} = response
					this.cardDetail = data
					this.ruleForm = {
						card_number: data.card_number,
						cards_activate: data.cards_activate,
						cards_period: data.cards_period,
						charge_card_balance: data.balance,
						staff_id: data.staff_name,
						notes: data.notes
					}
					this.staff = data.staff?data.staff:{}
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.btn-group_top {
		text-align: right;
	}

	.buttom_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		margin: 0px auto;
		margin-top: 50px;
		margin-bottom: 50px
	}

	.save {
		margin-right: 30px
	}

	.tback {
		display: flex;
		justify-content: right;
		width: 90%;
		margin: 0px auto;
	}
</style>
